<template>
    <div>

    <main>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick(activeName)">
            <el-tab-pane label="生活分享" name="生活分享">
                <div class="box-card animate__animated animate__bounceIn" v-for="dic in post">
                    <div class="right">
                        <h3><el-link type="primary" @click="postdetail(dic)">{{dic.title}}</el-link></h3>
                        <div class="username">
                                用户:{{dic.username}}
                        </div>
                    </div>

                </div>

            </el-tab-pane>
            <el-tab-pane label="知识探讨" name="知识探讨">
                <div class="box-card animate__animated animate__bounceIn" v-for="dic in post">
                    <div class="right">
                        <h3><el-link type="primary" @click="postdetail(dic)">{{dic.title}}</el-link></h3>
                        <div class="username">
                            用户:{{dic.username}}
                        </div>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="日常求助" name="日常求助">
                <div class="box-card animate__animated animate__bounceIn" v-for="dic in post">
                    <div class="right">
                        <h3><el-link type="primary" @click="postdetail(dic)">{{dic.title}}</el-link></h3>
                        <div class="username">
                            用户:{{dic.username}}
                        </div>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="社区公告" name="社区公告">
                <div class="box-card animate__animated animate__bounceIn" v-for="dic in post">
                    <div class="right">
                        <h3><el-link type="primary" @click="postdetail(dic)">{{dic.title}}</el-link></h3>
                        <div class="username">
                            用户:{{dic.username}}
                        </div>
                    </div>

                </div>
            </el-tab-pane>
        </el-tabs>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size=pageSize
                :total="total"
                :current-page=currentPage
                @current-change=page>
        </el-pagination>
    </main>
        <div class="post animate__animated animate__fadeInRight" v-show="hasLogin">
            <el-image class="image"
                      style="width: 120px; height: 120px"
                      :src="user.avatar"
            >
            </el-image>
            <el-divider><i class="el-icon-edit"></i></el-divider>
                <h4>我的帖子发布数：{{user.postnumber}}</h4>
            <el-button class="bt" type="primary" plain @click="addpost" >发布帖子</el-button>
            <br>
            <el-button class="bt" plain @click="mypost()">我的帖子</el-button>
            <br>
            <el-button class="bt" @click="mycomment()" plain>我的评论</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "forum",
        data() {
            return {
                activeName: '生活分享',
                hasLogin:false,
                dialog: false,
                loading: false,
                total: null,
                pageSize: null,
                currentPage: null,
                user:{
                    avatar:'https://www.gdpu.edu.cn/images/xh.png',
                    uuid:'',
                    postnumber:'',
                },
                post:[
                    {
                        id:'',
                        username:'',
                        title:'',
                        userid:''
                    }
                ]
            };
        },
        methods: {
            handleClick(activname) {

                const _this = this
                axios.get("http://localhost:8181/forum/listPosttype?type="+activname).then(function (resp) {
                    _this.post = resp.data.data.records
                    _this.total = resp.data.data.total
                    _this.currentPage = resp.data.data.current
                    _this.pageSize = resp.data.data.size
                })
            },
            addpost(){
                this.$router.push({
                    path: '/addPost',
                })
            },
            postdetail(dic){
                console.log(dic.id)
                this.$router.push({
                    path: '/showPost',
                    query: {
                        id: dic.id,
                        userid:dic.userid
                    }
                })
            },
            mypost(){
                this.$router.push({
                    path: '/selfcenter',
                    query: {
                        activeName:"post"
                    }
                })
            },
            mycomment(){
                this.$router.push({
                    path: '/selfcenter',
                    query: {
                        activeName:"comment"
                    }
                })
            },
            page(currentPage){
                const _this = this
                axios.get("http://localhost:8181/forum/listPosttype?type="+this.activeName+"?currentPage="+currentPage).then(function (resp) {
                    _this.consult = resp.data.data.records
                    _this.total = resp.data.data.total
                    _this.currentPage = resp.data.data.current
                    _this.pageSize = resp.data.data.size
                })
            },
        },
        created() {
            const _this = this
            axios.get("http://localhost:8181/forum/listPosttype?type="+this.activeName).then(function (resp) {
                _this.post = resp.data.data.records
                _this.total = resp.data.data.total
                _this.currentPage = resp.data.data.current
                _this.pageSize = resp.data.data.size
            })
            if(this.$store.getters.getUser.username) {
                this.user.username = this.$store.getters.getUser.username
                this.user.avatar = this.$store.getters.getUser.avatar
                this.user.uuid = this.$store.getters.getUser.id
                this.user.postnumber = this.$store.getters.getUser.post
                this.hasLogin = true
            }

            if(this.$store.getters.getUser.type==1){
                _this.disabled = false
            }

        },

    }
</script>

<style scoped>
    main{
        width: 700px;
        height: 900px;
        margin-top: 20px;
        margin-left: 100px;
    }
    .box-card {
        width: 650px;
        height: 100px;
        background-color: rgb(247, 243, 248);
        overflow:hidden;
        margin-top: 25px;
        border:1px solid rgba(1, 30, 64, 0.63);
        box-shadow: 0px 15px 10px -15px rgb(74, 131, 131);
        border-radius: 5px;
    }

    .box-card .right{
        margin-left: 30px;
        float:left;
        width:500px;
        text-align:left
    }
    .box-card .right h3{
        height:20px;
        line-height:20px;
        font-family:"Microsoft YaHei" !important;
        font-size:16px !important;
        overflow:hidden;
    }
    .username{
        font-size: 0.8em;
        font-family: "Microsoft YaHei" !important;
    }
    .box-card .right div{
        height:35px;
        overflow:hidden
    }
    .post{
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 80px;
        top: 135px;
        background-color: rgba(94, 255, 174,0.2);
        width: 300px;
        height: 500px;
        box-shadow: 0px 15px 10px -15px rgb(74, 131, 131);
        border-radius: 10px;
    }
    .image{
        margin-top: 20px;
    }
    .bt{
        margin: 10px !important;
    }
</style>